<template>
  <wd-card class="pt-20rpx">
    <template #title>
      <view class="pt-20rt document-head w-full h-full m">
        <wd-icon class="ml-2 mr-2" name="folder" size="25" color="#01BEFF" />
        文档管理
      </view>
    </template>
    <template #default>
      <wd-tabs v-modal="documentType" animated :slidable-num="5" :swipeable="true">
        <block v-for="item in documentTypeList" :key="item.value">
          <wd-tab :title="item.label">
            <view v-for="(document,index) in documentList" :key="index" class="document-item">
              <Icon :icon="computedFileIcon(document.fileType)[0].icon" class="file-icon" />
              <text class="document-title">{{ document.title }}</text>
            </view>
          </wd-tab>
        </block>
      </wd-tabs>
    </template>
  </wd-card>
</template>
<script setup lang="ts">
import {ref, computed} from 'vue'
import {Icon} from "@iconify/vue";

const documentType = ref()

const documentTypeList = ref([
  {label: '人事管理', value: 1},
  {label: '运营商政策', value: 2},
  {label: '采销大纲', value: 3},
  {label: '营销策略', value: 4},
  {label: '合同模板', value: 5},
])
const documentList = ref([
  {title: '文件名-1', fileType: 'pdf'},
  {title: '文件名-2', fileType: 'docx'},
  {title: '文件名-3', fileType: 'xlsx'}
])

const fileTypeList = ref([
  {type: 'pdf', icon: 'vscode-icons:file-type-pdf2', size: 10},
  {type: 'doc', icon: 'vscode-icons:file-type-word', size: 5},
  {type: 'docx', icon: 'vscode-icons:file-type-word', size: 5},
  {type: 'xls', icon: 'vscode-icons:file-type-excel', size: 5},
  {type: 'xlsx', icon: 'vscode-icons:file-type-excel', size: 5},
  {type: 'pptx', icon: 'vscode-icons:file-type-powerpoint2', size: 5},
])
const computedFileIcon = computed(() => (item: string) => {
  console.log('item', item)
  return fileTypeList.value.filter(fileType => {
    return fileType.type === item
  })
});
</script>

<style scoped>
.document-head {
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom right, #d8e5ff, #d6f4fa);
  height: 50px;
  border-radius: 8px;
}
.document-item {
  display: flex;
  align-items: center;
  padding: 10px;
  margin: 5px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s;
}

.document-item:hover {
  background-color: #e0f7ff;
}

.file-icon {
  font-size: 20px;
  color: #01beff;
  margin-right: 10px;
}

.document-title {
  font-size: 16px;
  color: #333;
}

</style>